<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>16行非替换元素的特殊性</title>
    <style>
        .content {
            background-color: pink;
            color: white;

            /* 
                特殊一 : 设置宽高不生效

            */
            width: 300px;
            height: 300px;
            /* 
                特殊二 ：
                    上下内边距会被撑起来，但是不占据空间
                    左右会被撑起来，会占据空间
            */
            padding: 50px;
            /* 
                特殊三 ：
                    上下边框会被撑开，但是不占据空间
                    左右的边框也会被撑开，占据空间
            */
            border: 10px #FF0F23 solid;
            /* 
                特殊四：
                    上下的外边距不生效,左右的margin生效
            */
            margin: 50px;
        }

        .content2 {
            background-color: skyblue;
            color: white;

            /* 
                特殊一 : 设置宽高不生效

            */
            width: 300px;
            height: 300px;
            /* 
                特殊二 ：上下内边距会被撑起来，但是不占据空间
                    左右会被撑起来，会占据空间
            */
            padding: 50px;
            /* 
                特殊三 ：
                    上下边框会被撑开，但是不占据空间
                    左右的边框也会被撑开，占据空间 
            */
            border: solid 10px purple;
        }

        .box2 {
            height: 300px;
            width: 300px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box">
        <span class="content">我是一个小span,我是一个行内非替换元素</span>
        <span class="content2">我是一个小span,我是一个行内非替换元素</span>
        <div class="box2">我是一个盒子</div>
    </div>
</body>

</html>